<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas</title>
  </head>
  <body>
    <!--
      1. 准备一个具备宽高的canvas
        canvas本身并不具备绘图能力，只是一个画布
        绘制的内容由js来控制
    -->
    <canvas id="charts" width="800" height="400"></canvas>
    <script>
      // 2. 获取画笔
      const charts = document.getElementById('charts')
      const context = charts.getContext('2d')

      console.log(context)

      context.moveTo(100, 100)
      context.lineTo(200, 200)
      context.lineTo(200, 100)
      context.lineTo(100, 100)
      // context.strokeStyle = 'yellowgreen'
      // 闭合(连接点)
      // context.stroke()
      // 填充
      context.fillStyle = 'yellowgreen'
      context.fill()
    </script>
  </body>
</html>
